<!-- 调库存 -->
<template>
	<view>
		<hx-navbar ref="hxnb" :config="config" @clickBtn="clickBtn">
			<view slot="bottom">
				<template>
					<view class="flex flex-sa f-35 m-b-10 p-t-10">
						<view class="f-35">
							<view class="flex flex-c f-32 text-color"> 总匹数 </view>
							<view class="flex flex-c f-30 m-b-10"> 3 </view>
						</view>
						<view class="f-35">
							<view class="flex flex-c f-32 text-color"> 总数量数 </view>
							<view class="flex flex-c f-30 m-b-10"> 3 </view>
						</view>
					</view>
					<view class="seletc-view">
						<view class="opts-item flex">
							<view class="opt flex">
								<template v-if="bile.data.storeId">
									<text class="m-r-10" style="color: #60b4f6;">{{ bile.data.storeName }}</text>
									<u-icon @click="() => { bile.data.storeId = ''; listPage() }" name="close"
										color="#60b4f6" size="10"></u-icon>
								</template>
								<template v-else>
									<text class="m-r-30 grey" @click="toWarehouse">仓库</text>
									<u-icon name="arrow-down-fill" color="#bbb"></u-icon>
								</template>
							</view>
							<view class="opt flex"
								@click="goRouer('/pages/application/pages/information/product-information/product-information?isJump=true')">
								<text class="m-r-30 grey">{{ bile.data.code }}</text>
								<u-icon name="arrow-down-fill" color="#bbb"></u-icon>
							</view>
							<view class="opt flex">
								<template v-if="bile.data.colorId">
									<text class="m-r-10" style="color: #60b4f6;">{{ bile.data.colorNumber }}</text>
									<u-icon name="close" @click="() => { bile.data.colorId = ''; listPage() }"
										color="#60b4f6" size="10"></u-icon>
								</template>
								<template v-else>
									<text class="m-r-30 grey" @click="toColor">颜色</text>
									<u-icon name="arrow-down-fill" color="#bbb"></u-icon>
								</template>
							</view>
						</view>
						<view class="opts-item flex">
							<view class="opt flex">
								<template v-if="false">
									<text class="m-r-10" style="color: #60b4f6;">明细仓</text>
									<u-icon name="close" color="#60b4f6" size="10"></u-icon>
								</template>
								<template v-else>
									<text class="m-r-30 grey" @click="toSpec">规格</text>
									<u-icon name="arrow-down-fill" color="#bbb"></u-icon>
								</template>
							</view>
							<view class="opt flex">
								<input class="input-view" type="text" v-model="bile.data.vatNo" placeholder="缸号"
									placeholder-style="color: #999;">
								<u-icon v-if="bile.data.vatNo" @click="() => bile.data.vatNo = ''" name="close"
									color="#60b4f6" size="10"></u-icon>
							</view>
							<view class="opt flex">
								<input class="input-view" type="text" placeholder="批号" placeholder-style="color: #999;">
							</view>
						</view>
					</view>
				</template>
			</view>
		</hx-navbar>
		<view class="list-view">
			<view class="item-view">
				<!-- <view class="title-view f-30 p-t-30">
					<text>总仓数 共：</text>
					<text>-59匹</text>
					<text>-8041</text>
				</view> -->
				<view class="sub-list" v-for="(item, index) in listData" :key="index">
					<view :class="item.active ? 'active' : ''" class="sub-item flex f-30">
						<view class="type green" @click="selectedProduct(item, index)">
							{{ item.colorNumber }}
						</view>
						<view class="status blue" @click="selectedProduct(item, index)">
							<text>{{ item.canDeliverUsePiecesCount }}匹</text>
							<text>{{ item.canDeliverUseQuantity }}米</text>
						</view>
						<view class="status blue flex flex-aic">
							<u--input @change="change" @focus="adIpnut($event, index)" placeholder="出库数" type="number"
								v-model="item.quantity" border="surround" placeholder-style="color: #999;"></u--input>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="footer-fixed flex p-r-20 p-l-20 flex-sb">
			<view class="f-l f-28">
				<view class="checked">
					<text class="grey p-r-10">已选</text>
					<text class="green">{{ statistics.num }}匹</text>
				</view>
				<view class="nums">
					<text class="grey p-r-10">数量</text>
					<text class="blue">{{ statistics.horses }}</text>
				</view>
			</view>
			<view class="btns-view flex">
				<view class="sure" @click="toDetail">
					确定
				</view>
				<view class="continue" @click="() => { bile.page.current += 1; listPage() }">
					继续调用
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import clIcon from "@/components/cl-icon/cl-icon.vue";
import { stockQueryListPage } from "@/apis/inventory/inventory";
import { mergeSnVoList } from "./sn-utils";
export default {
	name: '',
	components: {
		clIcon
	},
	data() {
		return {
			search: null,
			config: {
				title: "调库存",
				color: "#ffffff",
				//背景颜色;参数一：透明度（0-1）;参数二：背景颜色（array则为线性渐变，string为单色背景）
				backgroundColor: [1, ["#409EFF", "#409EFF", "#60b4f6", "#60b4f6"]],
				rightButton: [
					{
						key: "btn1",
						icon: "&#xe6d1;",
						position: "left",
					},
					{
						key: "btn2",
						icon: "&#xe888;",
						position: "left",
					},
				],
			},
			bile: {
				data: {
					"catId": "",
					"spuId": "",
					"code": "",
					"name": "",
					"colorId": "",
					"colorNumber": "",
					"storeId": "",
					"storeName": "",
					vatNo: "", //批号
				},
				page: {
					"current": 1,
					"size": 10
				}
			},
			listData: [],
			snVoList: [],//匹数:piecesCount: 1,数量:quantity: "1"
			statistics: {
				num: 0,
				horses: 0
			},
		}
	},
	computed: {},
	beforeDestroy() {
		uni.$off("on-warehouse-data");
		uni.$off("productInformation");
		uni.$off("on-color-data");
	},
	onLoad(opt) {
		if (opt) {
			this.bile.data = Object.assign(this.bile.data, opt)
			this.listPage()
		}
		// 获取仓库的信息
		uni.$on('on-warehouse-data', data => {
			this.bile.data.storeName = data.name
			this.bile.data.storeId = data.id
		})
		// 获取产品的信息
		uni.$on('productInformation', data => {
			this.bile.data.code = data.code
			this.bile.data.name = data.name
			this.bile.data.spuId = data.id
		})
		uni.$on('on-color-data', data => {
			this.bile.data.colorNumber = data.colorNumber
			this.bile.data.colorId = data.id
		})

	},
	onShow() {
		this.listPage()
	},
	methods: {
		// 
		change() {
			let array = this.listData.filter(data => data.active)
			this.statistics.num = array.length
			this.statistics.horses = 0
			for (let i = 0; i < array.length; i++) {
				if (array[i].quantity) {
					this.statistics.horses += Number(array[i].quantity)
				}
			}
		},
		// 鼠标失去焦点选中当前弹窗
		adIpnut(event, index) {
			this.listData[index].active = true
			let array = this.listData.filter(data => data.active)
			this.statistics.num = array.length
			this.statistics.horses = 0
			for (let i = 0; i < array.length; i++) {
				if (array[i].quantity) {
					this.statistics.horses += Number(array[i].quantity)
				}
			}
		},

		selectedProduct(item, index) {
			if (!this.listData[index].active) {
				this.listData[index].active = true
			} else {
				this.listData[index].active = !this.listData[index].active
			}
			let array = this.listData.filter(data => data.active)
			this.statistics.num = array.length
			this.statistics.horses = 0
			for (let i = 0; i < array.length; i++) {
				if (array[i].quantity) {
					this.statistics.horses += Number(array[i].quantity)
				}

			}
			this.$forceUpdate()
		},
		listPage() {
			uni.showLoading({
				title: "加载中"
			})
			stockQueryListPage(this.bile).then(res => {
				if (!res.flag) return
				let records = res.data.page.records || []
				for (let i = 0; i < records.length; i++) {
					records[i].quantity = null
				}
				this.listData.push(...records)
			}).finally(_ => {
				uni.hideLoading()
			})
		},
		goRouer(url) {
			this.$Router.push({
				path: url,
				// query:JSON.parse(JSON.stringify(item))
			});
		},
		// 跳转仓库
		toWarehouse() {
			uni.navigateTo({
				url: '/pages/application/pages/information/warehouse/warehouse?type=list'
			})
		},
		// 跳转颜色
		toColor() {
			// 先选产品后选颜色

			uni.navigateTo({
				url: `/pages/application/pages/cloth/color/index?type=list&source=dkc&spuId=${this.bile.data.spuId}`
			})
		},
		// 跳转规格
		toSpec() {
			// 先选产品后选规格

			uni.navigateTo({
				url: '/pages/application/pages/cloth/specifications/index'
			})
		},
		// 确定按钮
		toDetail() {
			// this.snVoList = []
			let array = this.listData.filter(data => data.active)
			// console.log("array", mergeSnVoList(array));
			let mergeList = mergeSnVoList(array)
			for (let index = 0; index < mergeList.length; index++) {
				for (let i = 0; i < mergeList[index].snVoList.length; i++) {
					mergeList[index].snVoList[i].sourceType = 'quote'
				}
			}
			uni.$emit("inventoryAdjustment", mergeList)
			this.$Router.back()
			// uni.navigateTo({
			// 	url: '/pages/application/pages/cloth/inventory-lossdetails/index'
			// })
		},
		searchChange() {
			this.goodSpuDataArr = [];
			this.pages.current = 1;
			this.initData();
		},
		clickBtn(item) {
			if (item.key === "btn1") {
				this.$Router.push({
					name: "financeAccountDetails",
				});
			} else if (item.key === "btn2") {
				// this.productPopShow = !this.productPopShow;
			}
		},
	}
}
</script>

<style lang="scss" scoped>
.text-color {
	color: #e9e9e9;
}

.grey {
	color: #999;
}

.seletc-view {
	// margin-top: 116rpx;
	background-color: #fff;

	.opts-item {
		border-bottom: 1rpx solid #dedede;
		height: 80rpx;

		.opt {
			flex: 1;
			justify-content: center;
			align-items: center;
		}

		.input-view {
			text-align: center;
			color: #333;
		}
	}
}

.green {
	color: #53c21d;
}

.blue {
	color: #409EFF;
}

.list-view {
	margin-top: 276rpx;
	padding-bottom: 120rpx;

	.title-view {
		font-weight: bold;
		padding-left: 20rpx;
	}

	.sub-list {
		padding: 0 20rpx;

		.sub-item {
			background-color: #fff;
			height: 100rpx;
			line-height: 100rpx;
			padding: 0 20rpx;
			border-radius: 10rpx;
			margin-bottom: 20rpx;

			.type {
				flex: 1;
			}

			.status {
				flex: 2;
			}
		}

		.active {
			border: 1px solid #409EFF;
			background-color: #dfefff !important;
		}
	}
}

.footer-fixed {
	height: 120rpx;
	background-color: #fff;
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	align-items: center;
	z-index: 11;

	.btns-view {
		.sure {
			width: 200rpx;
			background-color: #dfefff;
			height: 80rpx;
			line-height: 80rpx;
			text-align: center;
			color: #409EFF;
			border-radius: 80rpx 0 0 80rpx;
		}

		.continue {
			width: 200rpx;
			background-color: #409EFF;
			height: 80rpx;
			line-height: 80rpx;
			text-align: center;
			color: #fff;
			border-radius: 0 80rpx 80rpx 0;
		}
	}
}
</style>